// jq 入口函数：dom树建立完毕后立即执行
// window.onload：页面所有资源都加载完毕后才执行

// $(document).ready()
$(function () {

    // 1.准备 查询参数对象-------------------------------
    const q = {
        pagenum: 1, // 页码
        pagesize: 2, // 页容量
        cate_id: '', // 文章分类id
        state: '' // 发布状态（已发布/草稿）
    }

    // 为 模板引擎 添加 过滤器函数----------------------
    template.defaults.imports.dateFormat = function (val) {
        return moment(val).format('YYYY-MM-DD hh:mm:ss')
    }

    // 2.查询文章列表方法-------------------------------
    getPagedList()
    function getPagedList() {
        $.ajax({
            method: 'get',
            url: '/my/article/list',
            data: q,
            success(res) {
                // 如果出错，则提示，并停止执行
                if (res.status !== 0) return layui.layer.msg(res.message)
                // 如果成功，则通过模板引擎生成 数据行标签们
                const strHtml = template('tpl-table', res)
                // 将 生成的行标签 渲染到 tbody 中
                $('tbody').html(strHtml)
                // 生成页码条
                renderPageBar(res.total)
            }
        })
    }


    // 2.1 生成页码条--------------------------------
    function renderPageBar(total) {
        // a.生成页码条，渲染到页面中
        layui.laypage.render({
            elem: 'pageBox', //注意，这里的 test1 是 ID，不用加 # 号
            count: total, // 总函数
            limit: q.pagesize, // 页容量
            limits: [2, 5, 10, 15], // 页容量 下拉框
            curr: q.pagenum, // 页码
            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'], // 布局
            jump(a, first) { // 跳转方法
                console.log(a)
                // 设置好被点击的页码
                q.pagenum = a.curr
                // 设置 选中的 新的 页容量
                q.pagesize = a.limit
                // 如果不是通过 render触发，则说明是用户操作分页，则请求 新页的数据
                !first && getPagedList()
            }
        });
    }

    // 3.查询文章分类列表方法---------------------------
    getCateList()
    function getCateList() {
        $.ajax({
            method: 'get',
            url: '/my/article/cates',
            success(res) {
                // 如果出错，则提示，并停止执行
                if (res.status !== 0) return layui.layer.msg(res.message)
                // 如果成功，则通过模板引擎生成 数据行标签们
                const strHtml = template('tpl-cate', res)
                // 将 生成的行标签 渲染到 tbody 中
                $('[name=cate_id]').html(strHtml)
                // 手动调用layui.form.render 方法，绘制
                layui.form.render()
            }
        })
    }

    // 4.筛选表单提交事件--------------------------------
    $('#form-search').on('submit', function (e) {
        e.preventDefault()
        // 将 下拉框的选中值 设置给 q
        q.cate_id = $('[name=cate_id]').val()
        q.state = $('[name=state]').val()
        // 重新查询 文章列表
        getPagedList()
    })

    // 5.为删除按钮委托点击事件----------------------------
    $('tbody').on('click', '.btn-delete', function () {
        // a.获取 按钮上的id
        // const id = this.getAttribute('data-id')
        const id = this.dataset.id
        // b.询问是否删除
        layer.confirm('你确定要删除吗？亲！', function (index) {
            // c.发送删除操作
            $.ajax({
                method: 'get',
                url: '/my/article/delete/' + id,
                success(res) {
                    // 如果出错，则提示，并停止执行
                    if (res.status !== 0) return layui.layer.msg(res.message)
                    // 若果成功，重新加载当前数据
                    // 判断 当前页上 是否还有唯一的一行数据（通过 删除按钮个数来统计）
                    // 如果只有一个，则说明 已经刚刚删除完了本页的最后一行，页码需要-1
                    if ($('.btn-delete').length === 1) {
                        // 如果 当前页码 是1，则依然是 1
                        // 如果 当前页码 >1，则-1
                        // q.pagenum = q.pagenum === 1 ? q.pagenum : --q.pagenum
                        if (q.pagenum > 1) q.pagenum--
                    }
                    getPagedList()
                }
            })
            // d.关闭弹窗
            layui.layer.close(index);
        });
    })
})